function searchStaff() {
    let para = document.getElementById("searchInner");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "service.php", true);
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                para.innerHTML = xhr.responseText;
            }
        }
    }
}

function createStaff() {
	let para = document.getElementById("createInner");
	let staffName = document.getElementById("staffName");
	let staffNumber = document.getElementById("staffNumber");
	let staffSex = document.getElementById("staffSex");
	let staffJob = document.getElementById("staffJob");
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "service.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	let data = "name=" + staffName.value + "&number=" + staffNumber.value + "&sex=" + staffSex.value + "&job=" + staffJob.value;
	xhr.send(data);
	xhr.onreadystatechange = function() {
	    if (xhr.readyState === 4) {
	        if (xhr.status === 200) {
	            para.innerHTML = xhr.responseText;
	        }
	    }
	}
}

window.onload = function() {
    let btn = document.getElementById("search");
    btn.onclick = function() {
        searchStaff();
    }
    let createBtn = document.getElementById("create");
    createBtn.onclick = function() {
        createStaff();
    }
}